<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>City Clicks Chart</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="container mt-5">
    <h1 class="text-center">City Click Count by Ad ID</h1>
    <div id="chart" style="width: 100%; height: 600px;"></div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        axios.get('/api/province_city_ad_clicks/data')
            .then(function (response) {
                const data = response.data;

                // Process data
                const chartData = [];
                data.forEach(item => {
                    chartData.push({
                        city: item.city,
                        adId: item.adId,
                        clickCount: item.clickCount
                    });
                });

                const cities = [...new Set(chartData.map(item => item.city))];
                const adIds = [...new Set(chartData.map(item => item.adId))];

                const seriesData = adIds.map(adId => {
                    return {
                        name: `Ad ID ${adId}`,
                        type: 'bar',
                        data: cities.map(city => {
                            const item = chartData.find(d => d.city === city && d.adId === adId);
                            return item ? item.clickCount : 0;
                        }),
                        itemStyle: {
                            color: getRandomColor()
                        }
                    };
                });

                // Generate random colors for each series
                function getRandomColor() {
                    const letters = '0123456789ABCDEF';
                    let color = '#';
                    for (let i = 0; i < 6; i++) {
                        color += letters[Math.floor(Math.random() * 16)];
                    }
                    return color;
                }

                const option = {
                    title: {
                        text: 'City Click Count by Ad ID',
                        subtext: 'Hover over the bars to see Ad IDs',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            const city = params.name;
                            const adId = params.seriesName.replace('Ad ID ', '');
                            const clickCount = params.value;
                            return `City: ${city}<br/>Ad ID: ${adId}<br/>Click Count: ${clickCount}`;
                        }
                    },
                    legend: {
                        data: seriesData.map(series => series.name),
                        top: 'bottom'
                    },
                    xAxis: {
                        type: 'category',
                        data: cities,
                        axisLabel: {
                            interval: 0,
                            rotate: 45
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: seriesData
                };

                const chart = echarts.init(document.getElementById('chart'));
                chart.setOption(option);
            })
            .catch(function (error) {
                console.error('Error fetching data:', error);
            });
    });
</script>
</body>
</html>
